@import url('https://fonts.googleapis.com/css?family=Lora:700');
 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
  :root {
	 --z-distance: 10vw;
	 --from-left: 1;
	 --mobile-bkp: 50px;
}
/*
 *, *::before, *::after {
	 box-sizing: border-box;
}
 body {
	 min-height: 100vh;
	 margin: 0;
	 padding: 0;
	 overflow: hidden;
	 font-family: Lora, serif;
	 font-size: calc(14px + .3vw);
} */
 .slider {
    width: 25vw;
    height: 50vh;
    perspective: 1000px;
    transform-style: preserve-3d;
}
 .slider::before, .slider::after {
    content: '';
    left: -5vw;
    top: -3vh;
    visibility: hidden;
    position: absolute;
    width: 25vw;
    height: 50vh;
    background-position: center;
    background-size: cover;
    will-change: opacity;
    z-index: -1;
    box-shadow: 0 0 0 50vmax rgb(0 0 0 / 78%) inset;
}
 .slider::before {
	 background-image: var(--img-prev);
}
 .slider::after {
	 transition: opacity 0.1s;
	 opacity: 0;
	 background-image: var(--img-next);
}
 .slider--bg-next::after {
	 opacity: 1;
}
 .slider__content {
	 margin: auto;
	 width: 25vw;
	 height: 50vh;
	 /* max-height: 50vh; */
	 will-change: transform;
	 transform-style: preserve-3d;
	 pointer-events: none;
	 transition: all 1s ease-in-out;
	 transform: translateZ(var(--z-distance));
}
 .slider__images {
	 overflow: visible;
	 position: absolute;
	 width: 25vw;
	 height: 50vh;
	 z-index: 0;
	 /* box-shadow: 0 0 5em #000; */
	 transition: all 1s ease-in-out;
}
 .slider__images-item {
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 100%;
	 width: 100%;
	 will-change: transform;
	 transition-timing-function: ease-in;
	 visibility: hidden;
}
 .slider__images-item img {
	 display: block;

	 position: relative;
	 /* left: -1em; */
	 /* top: -1em; */
	 /* width: calc(100% + 1em* 2); */
	 /* height: calc(100% + 1em* 2); */
	 width: fit-content;
	 height: 60vh;
	 object-fit: contain;
	 border-radius: 10px;
	 will-change: transform;
	 /* box-shadow: 0px 0px 5px 1px #00000057; */
}
 .slider__images-item--active {
	 z-index: 20;
	 visibility: visible;
}
 .slider__images-item--subactive {
	 z-index: 15;
	 visibility: visible;
}
 .slider__images-item--next {
	 transform: translateX(100%);
	 opacity: 0;
}
 .slider__images-item--prev {
	 transform: translateX(-100%);
	 opacity: 0;
}
 .slider__images-item--transit {
	 transition: transform 0.5s , opacity 0.5s;
}
 .slider__text {
	visibility: hidden;
	 position: relative;
	 height: 100%;
}
 .slider__text-item {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 padding: 0.5em;
	 perspective: 1000px;
	 transform-style: preserve-3d;
}
 .slider__text-item > * {
	 overflow: hidden;
	 position: absolute;
}
 .slider__text-item h3, .slider__text-item p {
	 transition: transform 0.35s ease-out;
	 line-height: 1.5;
	 overflow: hidden;
}
 .slider__text-item h3 {
	 background-color: rgba(255, 255, 255, 0.5);
}
 .slider__text-item p {
	 font-family: 'Open Sans', sans-serif;
	 padding: 1em;
	 color: white;
	 text-align: center;
	 background-color: rgba(0, 0, 0, 0.5);
}
 .slider__text-item h3::before, .slider__text-item p::before {
	 content: '';
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 105%;
	 height: 100%;
	 transform: translateX(0);
	 transition: transform 0.35s ease-out 0.28s;
}
 .slider__text-item h3::before {
	 background-color: #000;
}
 .slider__text-item p::before {
	 background-color: #fff;
}
 .slider__text-item h3 {
	 margin: 0;
	 font-size: 16px;
	 padding: 0 0.3em;
	 position: relative;
	 font-weight: 700;
	 transform: translateX(-100%);
}
 .slider__text-item p {
	margin: 0;
	font-size: 12px;
	position: relative;
	font-weight: 700;
	transform: translateX(-100%);
	
}
 .slider__text-item-head {
    top: -10vh;
    left: 0vw;
	 transform: translateZ(3em);
	 /* clip-path: polygon(0 0, 0.5em 100%, 100% 100%, calc(100% - .3em) 0.3em); */
}
 .slider__text-item-info {
    bottom: -10vh;
    right: 30vw;
    width: 20vw;
    min-width: min-content;
	 transform: translateZ(2em);
	 /* clip-path: polygon(0.5em 0, 100% 0%, calc(100% - .5em) 100%, 0 calc(100% - .5em)); */
}
 .slider__text-item--active h3, .slider__text-item--active p {
	 transform: translateX(0);
}
 .slider__text-item--active h3::before {
	 transform: translateX(100%);
}
 .slider__text-item--active p::before {
	 transform: translateX(-100%);
}
 .slider__text-item--backwards h3::before, .slider__text-item--backwards p::before {
	 transition: transform 0.35s ease-in;
}
 .slider__text-item--backwards h3, .slider__text-item--backwards p {
	 transition: transform 0.35s ease-in 0.35s;
}
 .slider__nav {
	 position: absolute;
	 left: 0;
	 top: 0;
	 width: 100%;
	 height: 100%;
	 text-align: center;
}
 .slider__nav-arrows {
	 display: flex;
	 justify-content: space-between;
	 width: 100%;
	 position: absolute;
	 top: 0;
	 left: 0;
}
 .slider__nav-arrow {
	 height: 100vh;
	 width: 50vw;
	 text-indent: -9999px;
	 white-space: nowrap;
}
 .slider__nav-arrow--left {
	 --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 4 4'%3E %3Cpolyline points='3 1 1 2 3 3' stroke='white' stroke-width='.3' stroke-opacity='.5' fill='none'%3E%3C/polyline%3E %3C/svg%3E");
	 cursor: var(--arrow) 40 40, auto;
}
 .slider__nav-arrow--right {
	 --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 4 4'%3E %3Cpolyline points='1 1 3 2 1 3' stroke='white' stroke-width='.3' stroke-opacity='.5' fill='none'%3E%3C/polyline%3E %3C/svg%3E");
	 cursor: var(--arrow) 40 40, auto;
}
 .slider__nav-dots {
	visibility: hidden;
	 margin-top: 88vh;
	 display: inline-flex;
	 position: relative;
	 padding: 1em;
	 pointer-events: none;
}
 .slider__nav-dots::before {
	 content: '';
	 position: absolute;
	 left: calc(1em + 1em + 2px);
	 top: calc(1em + 2px);
	 width: calc(1em - 2px * 2);
	 height: calc(1em / 2 - 2px * 2);
	 background-color: rgba(255, 255, 255, .9);
	 transition: transform 0.7s ease-out;
	 transform: translateX(calc((1em + 1em * 2) * (var(--from-left) - 1)));
}
 .slider__nav-dot {
	 margin: 0 1em;
	 width: 1em;
	 height: 0.5em;
	 border: 2px solid rgba(255, 255, 255, .5);
	 cursor: crosshair;
	 pointer-events: all;
	 display: inline-block;
}
 .slider__nav-dot:hover {
	 border-color: rgba(255, 255, 255, .7);
}
 .slider__nav-dot:active {
	 border-color: rgba(255, 255, 255, .5);
}
 @media only screen and (max-width: 500px) {
	:root{
	--z-distance: 30vw;
}
.slider__images-item img {
	height: 45vh;
	
}
	.slider {
		width: 70vw;
		height: 50vh;
		max-height: 50vh;
		perspective: 800px;
		scale: 0.9;
   }
	
	 .slider__content {
		width: 50vw;
		height: 40vh; 
	}

	 .slider__nav-arrow {
		width: 25vw;
		 position: relative;
		 cursor: auto;
	}

	.slider__text-item-head {
		top: -3vh;
		left: 0vw;
		 transform: translateZ(3em);
		 /* clip-path: polygon(0 0, 0.5em 100%, 100% 100%, calc(100% - .3em) 0.3em); */
	}
	 .slider__text-item-info {
		right: 0vw;
		width: 100%;
		
	}
}